<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.c1{
				height: 200px;
				text-align: center;
				line-height: 200px;
				
			}
			.c2{
				height: 20px;
				text-align: center;
				line-height: 20px;
				background-color: black;
				color: white;
				
			}
			.c3{
				height: 8000px;
			}
			.fixed {
			           position: fixed;
			           top: 0;
			           left: 0;
			           width: 100%;   
			        }
		</style>
	</head>
	<body>
		<div class="c1">顶部内容区域</div>
		<div class="c2">我是吸顶元素</div> 
		<div class="c3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum nisi consequuntur cupiditate, dolor voluptatum quod non quo, deserunt tempora ratione corporis repellendus pariatur quibusdam similique atque necessitatibus aliquid! Delectus, cum.</div>
	   
		<script>
			
			$(document).ready(function(){
				var p=$(".c2").offset().top;
				
				$(window).scroll(function(){
					var st=$(window).scrollTop();
					if(st>p){
						$(".c2").addClass("fixed");
					}else{
						$(".c2").removeClass("fixed");
					}
				});
					
			});	
				//理解：实时抓取页面滚动值
				
			
			
			
		</script>
	</body>
</html>